<template>
  <div class="rank_month_pane">
    <h2>{{rankName}}</h2>
    <div class="rank_month_caption">
      <div class="rank_month_row">
        <template v-for="(ec, index) in rank_caption">
          <div class="rank_month_cell" :key="index">
            {{ec}}
          </div>
        <!--/ rank_month_cell -->
        </template>
      </div>
    </div>
    <!-- /rank_month_caption -->
    <div class="rank_box">
      <vcrolls :data="mData" :class-option="classOption" class="seamless-warp">
        <ul class="item">
          <li v-for="(md, index) in mData" :key="index">
            <div v-if="md.ROWNUM === 888888" class="rank_month_list" >
              <div class="rank_month_list_row">
                <div class="rank_month_list_cell_6">
                  {{md.USERNAME}}
                </div>
              </div>
            </div>

            <div v-else class="rank_month_list" >
              <div class="rank_month_list_row">
                <div class="rank_month_list_cell">
                  <div class="user_avatar">
                    <span class="img_box">
                      <img :src="/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(md.HEADPHOTOURL) ? md.HEADPHOTOURL : userAvatar" alt="用户头像">
                    </span>
                  </div>
                </div>
                <!-- /rank_month_list_cell -->
                <div class="rank_month_list_cell" v-if="md.ROWNUM === 1">
                  <img src="../../assets/Champion.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                </div>
                <div class="rank_month_list_cell"  v-else-if="md.ROWNUM === 2">
                  <img src="../../assets/Runnerup.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                </div>
                <div class="rank_month_list_cell" v-else-if="md.ROWNUM === 3" >
                  <img src="../../assets/seasonArmy.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                </div>
                <div class="rank_month_list_cell" v-else>
                 <span style="display: block;width: 0.38rem;height: 0.5rem;line-height: 0.5rem;font-size: 0.18rem;text-align: center">{{md.ROWNUM}}</span>
                </div>
                <!-- /rank_month_list_cell -->
                <div class="rank_month_list_cell">
                  {{md.USERNAME}}
                </div>
                <!-- /rank_month_list_cell -->
                <div class="rank_month_list_cell">
                  {{md.DCTZE}}万
                </div>
                <!-- /rank_month_list_cell -->
                <div class="rank_month_list_cell">
                  {{md.MBTZE}}万
                </div>
                <!-- /rank_month_list_cell -->
                <div class="rank_month_list_cell">
                  {{md.RATE}}%
                </div>
                <!-- /rank_month_list_cell -->
              </div>
              <!-- /rank_month_list_row -->
            </div>
            <!-- /rank_month_list -->
          </li>
        </ul>
      </vcrolls>
    </div>
  </div>
  <!-- /rank_month_pane -->
</template>

<script>
import vcrolls from 'vue-seamless-scroll';

export default {
  name: 'rankmonth',
  components: {
    vcrolls
  },
  props: {
    rankName: {
      type: String,
      default: ''
    },
    monthData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      dialIndex: 0,
      newIndex: 0,
      userAvatar: require('../../assets/avatar52.png'),
      rank_caption: ['排名头像', '排名', '姓名', '达成额', '目标额', '达成率'],
      mData: []
    };
  },
  computed: {
    classOption () {
      return {
        step: 1,
        limitMoveNum: 3,
        singleHeight: '0.92',
        waitTime: 2000,
        switchDelay: 2000,
        isSingleRemUnit: true
      }
    }
  },
  mounted () {
    this.mData = this.monthData
  },
  watch: {
    'monthData': {
      handler (val, oldval) {
        this.mData = val
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .rank_month_pane{
    width: auto;
    height: 3.88rem;
    h2{
      margin: 0 0 0.32rem;
      font-size: 0.22rem;
      line-height: 0.23rem;
      color: #75787e;
    }
    .rank_month_caption{
      display: table;
      width: 100%;
      height: auto;
      .rank_month_row{
        display: table-row;
        .rank_month_cell{
          display: table-cell;
          vertical-align: middle;
          font-size: 0.18rem;
          color: #f0f0f0;
          line-height: 1;
          &:first-child{
            width: 0.95rem;
          }
          &:nth-child(2){
            width: 0.82rem;
          }
          &:nth-child(3){
            width: 0.7rem;
          }
          &:nth-child(4){
            width: 0.85rem;
          }
          &:nth-child(5){
            width: 0.8rem;
          }
          &:nth-child(6){
            width: 1.02rem;
          }
        }
      }
    }
    .rank_box{
      margin-top: 0.1rem;
      width: 100%;
      height: 2.89rem;
      overflow: hidden;
      .seamless-warp{
        height: 2.89rem;
        overflow: hidden;
        .item{
          list-style: none;
          padding: 0;
          margin: 0 auto;
          li {
            height: 0.92rem;
            line-height: 0.92rem;
            .rank_month_list{
              padding: 0.1rem 0 0;
              display: table;
              width: 100%;
              height: auto;
              .rank_month_list_row{
                display: table-row;
                width: 100%;
                .rank_month_list_cell_6{
                  display: table-cell;
                  padding-left: 0.1rem;
                  width: 100%;
                  height: 0.92rem;
                  font-size: 0.16rem;
                  line-height: 0.92rem;
                  color: #75787e;
                }
                .rank_month_list_cell {
                  display: table-cell;
                  width:  auto;
                  height: 0.92rem;
                  font-size: 0.16rem;
                  color: #75787e;
                  line-height: 0.92rem;
                  vertical-align: middle;
                  .user_avatar{
                    padding: 0.04rem;
                    width: 0.74rem;
                    height: 0.74rem;
                    border-radius: 0.74rem;
                    -webkit-border-radius: 0.74rem;
                    -moz-border-radius: 0.74rem;
                    background: #282d35;
                    .img_box{
                      display: block;
                      width: 0.66rem;
                      height: 0.66rem;
                      overflow: hidden;
                      border-radius: 0.66rem;
                      -webkit-border-radius: 0.66rem;
                      -moz-border-radius: 0.66rem;
                    }
                  }
                  img{
                    display: block;
                    max-width: 100%;
                    height: auto;
                  }
                  &:first-child{
                    width: 0.95rem;
                  }
                  &:nth-child(2){
                    width: 0.82rem;
                  }
                  &:nth-child(3){
                    width: 0.7rem;
                  }
                  &:nth-child(4){
                    width: 0.85rem;
                  }
                  &:nth-child(5){
                    width: 0.8rem;
                  }
                  &:nth-child(6){
                    width: 1.02rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
